<template>
  <div class="app-container">
      <!-- 搜索框 -->
    <el-form :inline="true" :model="searchMap.data" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="searchMap.data.name"
          placeholder="景点名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="searchMap.data.site"
          placeholder="景点地址"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchData()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="dialogFormVisible_add = true;scenic={
         options:[
         ],
      }" 
          >景点添加</el-button>
      </el-form-item>
    </el-form>
<!-- 表格列表 -->
    <el-table
      :data="scenicList"
      tooltip-effect="dark"
      style="width: 100%"
     
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="景点ID" width="120"> </el-table-column>
      <el-table-column prop="name" label="景点名称" width="120"> </el-table-column>
      <el-table-column prop="theme" label="景点主题" show-overflow-tooltip></el-table-column>
      <el-table-column prop="feature" label="景点特色" show-overflow-tooltip></el-table-column>
      <el-table-column prop="businessHours" label="营业时间" show-overflow-tooltip></el-table-column>
      <el-table-column prop="site" label="景点地址" show-overflow-tooltip></el-table-column>
      <el-table-column prop="" label="操作" width="300">
        <template slot-scope="scope">
          <div >
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="
                handleEdit(scope.$index, scope.row);
              "
              >修改</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
<!-- 分页 -->
    <div class="block">
    <el-pagination
    style="float: right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchMap.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.total">
    </el-pagination>
    </div>
<!-- 添加品牌 -->
      <el-dialog title="添加景点" :visible.sync="dialogFormVisible_add">
      <el-form :model="scenic">
        <el-form-item label="景点名称" >
          <el-input v-model="scenic.name" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="景点主题">
    <el-input v-model="scenic.theme"></el-input>
  </el-form-item>
   <el-form-item label="景点营业时间">
    <el-input v-model="scenic.businessHours"></el-input>
  </el-form-item>
  <el-form-item label="景点特色">
    <el-input v-model="scenic.feature"></el-input>
  </el-form-item>
  <el-form-item label="景点地址">
    <el-input v-model="scenic.site"></el-input>
  </el-form-item>
  <el-form-item label="选择地区">
            <el-select placeholder="请选择省"  v-model="scenic.province" @change="cityList=[];findCityLists(scenic.province)">
               <el-option v-for="cat in provinceList" :key="cat.id" :label="cat.province" :value="cat.provinceid"
              ></el-option>
            </el-select>
            <el-select placeholder="请选择市"  v-model="scenic.city" @change="areaList=[];findAreasLists(scenic.city)">
              <el-option v-for="cat in cityList" :key="cat.id" :label="cat.city" :value="cat.cityid"
              ></el-option>
            </el-select>
            <el-select placeholder="请选择区" v-model="scenic.areas">
              <el-option v-for="cat in areaList" :key="cat.id" :label="cat.area" :value="cat.areaid"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="景区图片">
          <el-upload
            :headers=this.headers
            ref='upload'
            action="http://192.168.53.83:8214/upload"
            list-type="picture-card"
            name="headerImage"
            :on-success="uploadSuccess"
          >
            <img :src="this.scenic.img" />
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
    <div slot="footer" class="dialog-footer" >
        <el-button @click="dialogFormVisible_add = false">取 消</el-button>
        <el-button type="primary" @click="saveDate()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改景点" :visible.sync="dialogFormVisible_edit">
      <el-form :model="scenic">
        <el-form-item label="景点名称" >
          <el-input v-model="scenic.name" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="景点主题">
    <el-input v-model="scenic.theme"></el-input>
  </el-form-item>
   <el-form-item label="景点营业时间">
    <el-input v-model="scenic.businessHours"></el-input>
  </el-form-item>
  <el-form-item label="景点特色">
    <el-input v-model="scenic.feature"></el-input>
  </el-form-item>
  <el-form-item label="景点地址">
    <el-input v-model="scenic.site"></el-input>
  </el-form-item>
  <el-form-item label="选择地区">
            <el-select placeholder="请选择省"  v-model="scenic.province" @change="cityList=[];findCityLists(scenic.province)">
               <el-option v-for="cat in provinceList" :key="cat.id" :label="cat.province" :value="cat.provinceid"
              ></el-option>
            </el-select>
            <el-select placeholder="请选择市"  v-model="scenic.city" @change="areaList=[];findAreasLists(scenic.city)">
              <el-option v-for="cat in cityList" :key="cat.id" :label="cat.city" :value="cat.cityid"
              ></el-option>
            </el-select>
            <el-select placeholder="请选择区" v-model="scenic.areas">
              <el-option v-for="cat in areaList" :key="cat.id" :label="cat.area" :value="cat.areaid"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="景区图片">
          <el-upload
            :headers=this.headers
            ref='upload'
            action="http://192.168.53.83:8214/upload"
            list-type="picture-card"
            name="headerImage"
            :on-success="uploadSuccess"
          >
            <img :src="this.scenic.img" />
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible_add = false">取 消</el-button>
        <el-button type="primary" @click="editConfirm()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {search,update,delOne,insert,findAllProvinces,findCityList,findAreasList} from '@/api/scenic'
export default {
  data() {
    return {
      dialogFormVisible_edit: false, //编辑弹窗开关
      dialogFormVisible_add: false, //添加弹窗开关
      scenicList: [],
      provinceList:[],
      cityList:[],
      areaList:[],
      headers:{},
      editDialogData: {},
      searchMap:{
          page:1,
          limit:5,
          data:{}
      },
      total:0,
      scenic:{},
      delData:{},
    };
  },
  methods:{
    handleDelete(index, row) {
      this.delData = row;
      this.$confirm("此操作将永久删除该景点, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delOne(this.delData).then((res) => {
        if (res.success) {
          this.searchData();
          this.$message({
            showClose: true,
            message: res.msg,
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: "error",
          });
        }
        }
       );
      })
      },
     editConfirm() {
      update(this.scenic).then((res) => {
        if (res.success) {
          this.searchData();
          this.$message({
            showClose: true,
            message: res.msg,
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: "error",
          });
        }
        this.dialogFormVisible_edit = false;
      });
    },
    handleEdit(index, row) {
      let that = this;
      that.dialogFormVisible_edit = true;
      that.scenic = row;
      that.findCityLists(that.scenic.province);
      console.log(11111);
      that.findAreasLists(that.scenic.city);
     // el-upload-list__item-thumbnail
     this.$nextTick(()=>{
               this.$refs.Upload.clearFiles();//清空图片
             });
    },
    uploadSuccess(response, file, fileList) {
      this.scenic.img = response.data;
    },
    saveDate(){
         console.log(1);
          insert(this.scenic).then(res=>{
            console.log(res)
           if (res.success) {
              this.searchData();
             this.dialogFormVisible_add=false;
                this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "success",
                });
            } else {
                this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "error",
                });
            }

          })
       },
      //搜索
      
    findAllProvinceList(){
          var _this=this;
          findAllProvinces().then(res=>{
          _this.provinceList=res;
        })      
        },
    findCityLists(provinceid){
           var provinces = {"provinceid":provinceid}
          findCityList(provinces).then(res=>{
          this.cityList=res;
        })      
        },
    findAreasLists(cityid){
          console.log(cityid)
          var city = {"cityid":cityid}
          findAreasList(city).then(res=>{
          this.areaList=res;
        })      
        },
     searchData(){
          var _this=this
          search(this.searchMap).then(res=>{
              _this.scenicList=res.data
              _this.total=res.total
          })
      },
      //通过
      
      //驳回
     
      handleSizeChange(size){
          this.searchMap.limit=size
          this.searchData()
      },
      handleCurrentChange(currentPage){
          this.searchMap.page=currentPage
           this.searchData()
      }
  },
  created(){
      this.searchData();
      this.findAllProvinceList()
  },
  watch:{
        // 'scenic.province':{
        //      handler: function() {
        //             //请求二级分类
        //             this.findAllProvinceList();
        //      }
        // },
        // 'scenic.city':{
        //      handler: function(provinceid) {
        //             //请求三级分类
        //             this.findCityLists(provinceid);
        //      }
        // },
        // 'scenic.areas':{
        //      handler: function(cityid) {
        //       this.findAreasLists(cityid);
        //      }
        // },
    }
};
</script>